<template>
    <!-- 页脚 -->
    <div class="w-full bg-[#0A0A0A] py-12 mt-16">
        <div class="container mx-auto grid grid-cols-2 md:grid-cols-6 gap-8 border pb-10 border-b-neutral-900">
            <div class="text-white text-sm">
                <div class="font-medium mb-4">CART OPTIONS</div>
                <ul class="space-y-2 text-white/70">
                    <li>Shopping Cart</li>
                    <li>Checkout</li>
                </ul>
            </div>

            <div class="text-white text-sm">
                <div class="font-medium mb-4">SECURE PAYMENTS</div>
                <ul class="space-y-2 text-white/70">
                    <li>PayPal</li>
                    <li>Credit Card</li>
                </ul>
            </div>

            <div class="text-white text-sm">
                <div class="font-medium mb-4">LISTED PRODUCTS</div>
                <ul class="space-y-2 text-white/70">
                    <li>Bestsellers</li>
                    <li>New Products</li>
                </ul>
            </div>

            <div class="text-white text-sm">
                <div class="font-medium mb-4">24/7 CUSTOMER SERVICE</div>
                <ul class="space-y-2 text-white/70">
                    <li>Contact</li>
                    <li>Terms & Conditions</li>
                </ul>
            </div>

            <div class="text-white text-sm">
                <div class="font-medium mb-4">FAST DELIVERY</div>
                <ul class="space-y-2 text-white/70">
                    <li>Shipping Info</li>
                    <li>Tracking Order</li>
                </ul>
            </div>

            <div class="text-white text-sm">
                <div class="font-medium mb-4">EASY RETURNS</div>
                <ul class="space-y-2 text-white/70">
                    <li>Return Policy</li>
                    <li>FAQs</li>
                </ul>
            </div>
        </div>

        <!-- 订阅区域 -->
        <div class="container flex flex-row justify-between mx-auto mt-13 border pb-10 border-b-neutral-900">
            <div class="text-4xl font-bold text-white font-playball tracking-wide mb-6 text-center">
                Stay tuned on all the latest and greatest
            </div>
            <div>
                <div class="flex mx-auto">
                    <input type="email" placeholder="Email" class="flex-1 cursor-pointer bg-[#1A1A1A] text-white border-none px-4 py-3 rounded-l focus:outline-none">
                    <button class="bg-rose-600 !cursor-pointer text-white px-6 py-3 rounded-r hover:bg-red-700 transition">
                        SUBSCRIBE
                    </button>
                </div>
                <p class="text-white/80 text-xs text-center mt-3">
                    By subscribing, confirm that read of privacy policy relating marketing materials through 
                    which you will contact via email.
                </p>
            </div>
        </div>

        <!-- 页脚底部 -->
        <div class="container mx-auto mt-10 grid grid-cols-1 md:grid-cols-3 gap-8 border pb-10 border-b-neutral-900">
            <!-- 左侧 -->
            <div>
                <div class="text-lg font-bold text-white mb-2">Our Flagship Store</div>
                <address class="text-white/90 text-base font-medium not-italic">
                    5000 Estate Enighed<br>
                    Suite 407, London, UK<br>
                    The first line 111
                </address>
                <div class="text-white/90 text-base font-medium mt-4">
                    Mon-Fri: 09:00-19:00<br>
                    Sat: 10:00-15:00<br>
                    Sun: CLOSED
                </div>
            </div>

            <!-- 中间 -->
            <div>
                <div class="text-lg font-bold text-white mb-2">Contact us</div>
                <p class="text-white/90 text-base font-medium mb-2">
                    Do you want to ship? If you have any questions, please<br>
                    do not hesitate to send us message. We will reply in 24h.
                </p>
                <button class="text-white/90 text-base font-medium underline mt-4">
                    Contact us
                </button>
            </div>

            <!-- 右侧 -->
            <div>
                <div class="text-lg font-bold text-white mb-2">About Our Info</div>
                <p class="text-white/90 text-base font-medium">
                    We are about material selected for outstanding. Designs,<br>
                    fabrics and products we make.
                </p>
                <div class="text-white/90 text-base font-medium mt-4">
                    Made thanks to thick screens for organizing the<br>
                    products and materials for clients to buy.
                </div>
            </div>
        </div>

        <!-- 支付方式 -->
        <div class="container mx-auto mt-12 flex justify-between items-center">
            <!-- 左侧支付图标 -->
            <div class="flex items-center">
                <div class="w-11 h-6 flex items-center justify-center rounded">
                    <ApplePayIcon />
                </div>
                <div class="w-11 h-6 flex items-center justify-center rounded">
                    <GooglePayIcon />
                </div>
                <div class="w-11 h-6 flex items-center justify-center rounded">
                    <MaestroIcon />
                </div>
                <div class="w-11 h-6 flex items-center justify-center rounded">
                    <MastercardIcon />
                </div>
                <div class="w-11 h-5.5 flex items-center justify-center rounded">
                    <UnionPayIcon />
                </div>
                <div class="w-11 h-6 flex items-center justify-center rounded">
                    <VisaIcon />
                </div>
            </div>
            
            <!-- 右侧国家/货币选择器 -->
            <div class="flex items-center">
                <button class="text-white flex items-center border border-gray-700 rounded px-3 py-1 hover:bg-white/10">
                    <img src="https://flagcdn.com/w20/us.png" alt="USA" class="mr-2" width="16">
                    UNITED STATES | USD $
                </button>
            </div>
        </div>

        <!-- 社交媒体和版权信息 -->
        <div class="container mx-auto mt-1 flex justify-between items-center pt-4">
            <!-- 左侧社交媒体图标 -->
            <div class="flex gap-4">
                <a href="#" class="text-white hover:text-rose-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"></path></svg>
                </a>
                <a href="#" class="text-white hover:text-rose-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"></path></svg>
                </a>
                <a href="#" class="text-white hover:text-rose-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.244 4c.534.003 1.87.016 3.29.073l.49.02c1.42.057 2.85.196 3.543.398a4.002 4.002 0 012.779 2.778c.204.694.342 2.123.401 3.542l.016.491c.059 1.425.074 2.768.077 3.302l.001.455-.001.456c-.003.534-.018 1.877-.077 3.302l-.021.492c-.057 1.419-.196 2.848-.398 3.542a4.003 4.003 0 01-2.779 2.778c-.694.204-2.123.342-3.543.4l-.49.018c-1.42.058-2.76.074-3.294.076l-.458.001-.456-.001c-.534-.002-1.875-.018-3.295-.076l-.49-.02c-1.42-.057-2.849-.195-3.543-.398a4.002 4.002 0 01-2.778-2.778c-.205-.694-.342-2.123-.4-3.541l-.018-.492C2.02 15.876 2.004 14.532 2 13.998L2 13.544l.001-.456c.004-.534.02-1.876.081-3.301l.019-.492c.057-1.42.197-2.847.4-3.54a4.001 4.001 0 012.777-2.78c.694-.204 2.123-.342 3.542-.399l.491-.02c1.419-.058 2.755-.073 3.29-.076l.457-.001zm.436 1.951H11.33c-.526.002-1.722.016-3.049.069l-.463.02c-1.265.05-2.6.173-3.148.333a2.05 2.05 0 00-1.427 1.428c-.113.382-.226 1.495-.293 2.874a57.6 57.6 0 00-.09 3.054l-.002.588c0 .342.004 1.165.032 2.142l.02.511c.057 1.506.186 2.704.333 3.148a2.052 2.052 0 001.428 1.427c.382.113 1.495.226 2.874.294.908.044 1.837.068 2.592.08l.462.007.462-.006c.755-.013 1.684-.037 2.592-.081 1.379-.068 2.492-.18 2.875-.294a2.051 2.051 0 001.428-1.428c.113-.382.215-1.37.291-2.618l.033-.894.013-.348.01-.303.013-.428a55.2 55.2 0 00.03-1.845v-.841a62.2 62.2 0 00-.069-3.051l-.02-.465c-.05-1.264-.175-2.598-.334-3.147a2.051 2.051 0 00-1.428-1.428c-.382-.113-1.495-.226-2.874-.293a55.9 55.9 0 00-2.83-.087zM12 7.892a4.108 4.108 0 110 8.216 4.108 4.108 0 010-8.216zm0 1.959a2.15 2.15 0 100 4.297 2.15 2.15 0 000-4.297zm4.248-3.507a.987.987 0 11-1.975.001.987.987 0 011.975-.001z"></path></svg>
                </a>
                <a href="#" class="text-white hover:text-rose-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
                </a>
            </div>
            
            <!-- 版权信息 -->
            <div class="flex items-center justify-center space-x-2">
                <span class="text-white/50 text-sm">© 2025</span>
                <span class="text-white/50 text-sm">|</span>
                <a href="#" class="text-white hover:underline text-sm">Powered by Xavvi</a>
                <span class="text-white/50 text-sm">|</span>
                <a href="#" class="text-white hover:underline text-sm" @click.prevent="scrollToTop">Back to top</a>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import VisaIcon  from '@/components/icon/visa.vue'
import ApplePayIcon from '@/components/icon/apple-pay.vue'
import MastercardIcon from '@/components/icon/mastercard.vue'
import UnionPayIcon from '@/components/icon/union-pay.vue'
import MaestroIcon from '@/components/icon/maestro.vue'
import GooglePayIcon from '@/components/icon/google-pay.vue'

export default defineComponent({
    name: 'GlobalFooter',
    components: {
        VisaIcon,
        ApplePayIcon,
        MastercardIcon,
        UnionPayIcon,
        MaestroIcon,
        GooglePayIcon
    },
    methods: {
        /*
        * 滚动到顶部
        */
        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    }
});
</script>